import { formatDate } from '@src/assets/js/tool'
import React from 'react'
import { Row, Col } from 'antd'
import style from './Index.module.less'
import componentMap from './components/map'
import DocList from './components/DocList/Index'

function Main ({ data, instance }) {
  return data.map((li, i) => {
    const vars = li.vars || []
    const otherVars = vars.filter(li => li.type !== '文书')
    const docVars = vars.filter(li => li.type === '文书')
    return (
      <div className={style.contaienr} key={i}>
        <div className={style['title-line']}>
          <span>{li.action_name}</span>
          <span className={style['action-operator']}>{li.operator}</span>
          <span className={style['action-date']}>{formatDate(li.complete_datetime, 'YYYY-MM-DD HH:mm')}</span>
        </div>
        <div className={style.vars}>
          <Row gutter={24}>
            {otherVars.map((li, i) => {
              const Component = componentMap[li.type]
              return (
                <Col span={li.span || 8} key={i}>
                  {Component ? <Component data={li} /> : <div />}
                </Col>
              )
            })}
          </Row>
        </div>
        <div className={style.remark}>
          <div className={style['remark-label']}>{li.remark_alias || '备注'}</div>
          <div className={style['remark-value']}>{li.remark || '无'}</div>
        </div>
        {
          docVars.length ? <DocList data={docVars} caseid={instance.caseid} /> : <div />
        }
      </div>
    )
  })
}

export default Main
